<template>
  <span>
    <el-upload
      :class="{'hide-update': limit === value.length}"
      list-type="picture-card"
      :action='action'
      :accept="accept"
      :fileList="fileList"
      :data="formData"
      :limit="limit"
      :before-upload="beforeUpload"
      :before-remove="remove"
      :on-success="success"
      :on-preview="preview"
      :multiple="false"
    >
    <i class="el-icon-upload"></i>
      <el-dialog append-to-body :visible.sync="dialogVisible">
        <img v-if="preUrl" width="100%" :src="preUrl" alt="">
        <el-button @click="confirm" v-if="showbtn" class="my-btn" type="primary" style="float: left">设置为封面</el-button>
        <el-button v-if="showbtn"  @click="changeSwiper('left')" type="warning" plain icon="el-icon-arrow-left" class="left-btn"></el-button>
        <el-button v-if="showbtn"  @click="changeSwiper('right')" type="warning" plain icon="el-icon-arrow-right" class="right-btn"></el-button>
      </el-dialog>
    </el-upload>
    <em class="tip">{{ tip }}</em>
  </span>
</template>

<script>
  import { fetchToken } from '@/api/qnToken'

  export default {
    props: {
      value: {
        type: Array,
        default() {
          return []
        }
      },
      tip: {
        type: String,
        default: ''
      },
      limit: {
        type: Number,
        default: 1
      },
      size: {
        type: Number,
        default: 5000
      },
      accept: {
        type: String,
        default: 'image/png, image/jpeg, image/gif'
      },
      action: {
        type: String,
        default: 'https://upload.qiniup.com'
      },
      module: {
        type: String,
        default: ''
      },
      showbtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        base_url: '',
        formData: {
          token: '',
          'x:module': 'work'
        },
        preUrl: '',
        dialogVisible: false,
        confirmData: {}
      }
    },
    computed: {
      fileList() {
        const fileList = JSON.parse(JSON.stringify(this.value))
        fileList.forEach((item, key) => {
          item.name = key
        })
        return fileList
      }
    },
    methods: {
      changeSwiper(direction) {
        let index = this.confirmData.name
        const len = this.fileList.length
        if (direction === 'left') {
          index <= 0 ? index = len - 1 : index -= 1
        } else {
          index >= len - 1 ? index = 1 : index += 1
        }
        this.confirmData = this.fileList[index]
        this.preUrl = this.confirmData.url
      },
      confirm() {
        this.$emit('confirm', this.confirmData)
      },
      async beforeUpload(file) {
        if (file.size / 1000 > this.size) {
          this.$message.warning('图片过大')
          return Promise.reject()
        }
        const { token } = await fetchToken(this.module)
        this.formData.token = token
        return true
      },
      change(value) {
        this.$emit('change', value)
      },
      remove(file) {
        const value = this.fileList.filter((item, key) => key !== file.name)
        this.$emit('input', value)
        this.change(value)
      },
      success(data) {
        const { base_url, path, id } = data
        const url = base_url + path
        const value = [...this.value, { url, path, id }]
        this.$emit('input', value)
        this.change(value)
      },
      preview(file) {
        this.confirmData = file
        this.preUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tip {
    color: #f0ad4e;
  }
</style>

<style lang="scss">
  .hide-update .el-upload--picture-card {
    display: none;
  }
  .my-btn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .left-btn {
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .right-btn {
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
</style>
